<template>
    <div class="app-pagination">
        <div class="pagination-box">
            <p class="total-num" v-if="!small">共{{ total }}条</p>
            <el-pagination
                v-bind="$attrs"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                :layout="layout"
                :small="small"
               
            ></el-pagination>
              <p class="total-num-small" v-if="small">共{{ total }}条/{{ currentPage }}页</p>
        </div>
    </div>
</template>

<script setup>
import {computed, ref} from 'vue';
const language = ref('zh-cn');
const props = defineProps({
    currentPage: {
        type: Number,
        default: 1
    },
    pageSizes: {
        type: Array,
        default: () => {
            return [10, 20, 50];
        }
    },
    pageSize: {
        type: Number,
        default: 20
    },
    total: {
        type: Number,
        default: 500
    },
    layout: {
        type: String,
        default: 'prev, pager, next'
    },
    small: {
        type: Boolean,
        default: false
    },
     hideOnSinglePage: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['size-change', 'current-change']);
function handleSizeChange(pageSize) {
    emit('size-change', pageSize);
}

function handleCurrentChange(currentPage) {
    emit('current-change', currentPage);
}
</script>

<style lang="scss" scoped>
.app-pagination {
    display: inline-block;
    .pagination-box {
        display: flex;
        align-items: center;
    }

    .el-pagination {
        :deep(.el-pager) {
            .number {
                width: auto;
                height: 32px;
                border-radius: 4px;
                background-color: var(--srt-pagination-bg-color);
                color: var(--srt-pagination-text-color);
               outline: none;
            }
        }

        &.is-background {
            :deep(.el-pager) {
                .more {
                    background-color: transparent;
                    &:hover {
                        background-color: transparent;
                        color: var(--srt-pagination-switch-hover-color);
                    }
                }
                li {
                    &:hover {
                        background-color: var(--srt-pagination-hover-bg-color);
                        color: var(--srt-color-gray);
                    }
                    &:not(.is-disabled) {
                        &.is-active {
                            background-color: var(
                                --srt-pagination-active-bg-color
                            );
                            color: var(--srt-pagination-active-text-color);
                            &:hover {
                                background-color: var(
                                    --srt-pagination-active-bg-color
                                );
                                color: var(--srt-pagination-active-text-color);
                            }
                        }
                    }
                }
            }
            :deep(.btn-prev) {
                background: #fff;
                border-radius: 4px;
                border: 1px solid #f4f4f4;
                height: 32px;
                width: 32px;
                &:not(.is-disabled) {
                    .is-active {
                        background-color: var(--srt-pagination-active-bg-color);
                        color: var(--srt-pagination-active-text-color);
                    }
                    &:hover {
                        background-color: var(--srt-pagination-hover-bg-color);
                        color: var(--srt-color-gray);
                    }
                }
            }
            :deep(.btn-next) {
                background: #fff;
                border-radius: 4px;
                border: 1px solid #f4f4f4;
                height: 32px;
                width: 32px;
                &:not(.is-disabled) {
                    .is-active {
                        background-color: var(--srt-pagination-active-bg-color);
                        color: var(--srt-pagination-active-text-color);
                    }
                    &:hover {
                        background-color: var(--srt-pagination-hover-bg-color);
                        color: var(--srt-color-gray);
                    }
                }
            }
        }
        &.el-pagination--small {
            :deep(.el-pager) {
                .number {
                    width: auto;
                    height: 26px;
                }
            }
            :deep(.btn-prev) {
                width: 26px;
                height: 26px;
            }
            :deep(.btn-next) {
                width: 26px;
                height: 26px;
            }
            :deep(.el-select) {
                .el-input {
                    width: 85px;
                }
            }
            :deep(.el-input__inner) {
                height: 26px !important;
                line-height: 26px !important;
            }
        }

        :deep(.el-select) .el-input {
            width: 108px;
        }
    }
    .total-num {
        color: var(--srt-color-gray);
        font-size: 14px;
        line-height: 17px;
        margin-right: 12px;
    }
}
.total-num-small {
    font-size: 12px;
    color: #999999;
    margin-left: 12px;
}
:deep(.el-pagination__sizes) {
    height: 32px;
    margin-left: 10px;

    .el-input__wrapper {
        border-radius: 16px;
    }
    .el-input--default {
        height: 32px;
    }
}

:deep(.el-input__inner) {
    color: var(--srt-pagination-text-color);
}
:deep(.el-pagination__jump) {
    margin-left: 0;
}
:deep(.el-input__wrapper) {
    border-radius: 16px;
    box-shadow: none;
    border: 1px solid #f4f4f4;
}
:deep(.el-pagination__editor) {
    height: 32px;
}
:deep(.btn-prev) {
    .el-icon {
        font-weight: normal;
        &::before {
            content: '\e6b4';
            font-family: 'iconfont' !important;
            color: #9c9c9c;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
        }
        svg {
            display: none;
        }
    }
}
:deep(.btn-next) {
    .el-icon {
        font-weight: normal;
        &::before {
            content: '\e691';
            font-family: 'iconfont' !important;
            color: #9c9c9c;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
        }
        svg {
            display: none;
        }
    }
}
:deep(.el-select__icon) {
    &::before {
        content: '\e68e';
        font-family: 'iconfont' !important;
        color: #9c9c9c;
        font-size: 12px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-transform: rotate(180deg) scale(0.83);
        font-weight: normal;
    }
    svg {
        display: none;
    }
}
:deep(.el-input--small){
    font-size: 14px;
}
</style>
